<template>
  <div  >
    <div style="margin: 20px 0" >
      <el-select class="input" v-model="timeRange" placeholder="请选择" @change="load">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
    <el-card>
      <div id="line" style="width: 60%; height: 400px; float: left"></div>
      <div id="main" style="width: 40%; height: 400px; float: right"></div>
    </el-card>




  </div>

</template>

<script>
import * as echarts from 'echarts'
import Cookies from "js-cookie";
import request from "@/utils/request";

const option = {
  title: {
    text: '图书借还统计'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['借书数量','还书数量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: []   //x轴 从后台获取数据
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '借书数量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: []
    },
    {
      name: '还书数量',
      type: 'line',
      stack: 'Total',
      smooth: true,
      data: []
    },
  ]
};
const optionPie = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 14, name: '教育' },
        { value: 12, name: '汉语言文学' },
        { value: 24, name: '计算机' },
        { value: 6, name: '传记' },
        { value: 5, name: '小说' }
      ]
    }
  ]
};

export default {
  name: 'HomeView',
  data(){
    return{
      admin: Cookies.get('admin') ?JSON.parse(Cookies.get('admin')) : { },
      lineBox: null,
      timeRange: 'week',
      options: [
        {label: '最近一周',value: 'week'},
        {label: '最近一个月',value: 'month'},
        {label: '最近三个月',value: 'month3'},
      ]
    }
  },

  mounted(){
    this.load()
  },
  methods:{
    load(){
      if (!this.lineBox){
        this.lineBox = echarts.init(document.getElementById('line')) //初始化容器
      }
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      optionPie && myChart.setOption(optionPie);
      request.get('/borrow/lineCharts/' + this.timeRange).then(res=>{
        option.xAxis.data = res.data.date
        option.series[0].data = res.data.borrow
        option.series[1].data = res.data.returnbook
        this.lineBox.setOption(option) //设置容器属性值
      })
    }
  },



  created(){
    request.get('/admin/' + this.admin.id).then(res=>{
      this.admin = res.data
    })
  },

}
</script>
